<template>
	<view class="page_news">
		<view class="banner">
			<image src="/static/index/banner.jpg" mode="aspectFill"></image>
			<view class="title fs33 cfff fwb">欧营头条</view>
		</view>

		<view class="card">
			<view class="top">
				<view @click="goPage('/pages/about/index')">
					<view class="c333 mb10">美丽欧营</view>
					<view class="c999 fs22 ">草堂镇欧营村简介</view>
					<image src="/static/icon14.png" mode="aspectFill"></image>
				</view>
				<view @click="goPage('/pages/market/index')">
					<view class="c333 mb10">市场行情</view>
					<view class="c999 fs22">更好地把握市场机会</view>
					<image src="/static/icon15.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="list">
				<navigator class="list_item flex bgfff mt28" v-for="(item, index) in list" :key="index"  :url="'/pages/news/detail?id='+item.id">
					<view class="left flex-sk0 cfff flex flex-col just-center align-center" :class="{ bg_red: index % 2 == 1 }"
						v-if="item.picUrl">
						<image :src="$fullImage(item.picUrl)" mode="aspectFill"></image>
					</view>
					<view class="right flex flex-col just-sb">
						<view class="c333 fwb text-ellipsis-2 mb28">{{item.newsTitle}}</view>
						<view class="flex just-sb c999 fs22">
							<view>{{item.authorName}}</view>
							<view>{{item.sourceTime}}</view>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/news/list" class="flex align-center fs22 c999 just-center mt28">
					查看更多
					<image style="width: 22rpx;height: 22rpx;" src="@/static/ll.png" mode=""></image>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
import {getAction,gateway} from '@/utils/api.js'
export default {
	data() {
		return {
			list:[],
		}
	},
	created() {
		this.getData()
	},
	methods: {
		goPage(url) {
			if (url) {
				uni.navigateTo({
					url: url
				});
			}
		},
		getData(){
			let params={code:'CYFW',enable:1,pageSize:5}
			getAction(gateway.operate+'/news/newInfo/list',params).then(res=>{
				console.log(res);
				if(res.code==200){
					this.list=res.result.records
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.page_news {
	.banner {
		height: 562.5rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.title {
			position: absolute;
			top: 80rpx;
			left: 33rpx;

		}
	}

	.card {
		padding: 28rpx;

		.top {
			margin-top: -114rpx;
			height: 177.78rpx;
			background: #ffffff;
			border-radius: 16.67rpx;
			z-index: 1;
			position: relative;
			padding: 28rpx;
			display: flex;
			justify-content: space-between;

			>view {
				width: 305.56rpx;
				height: 122.22rpx;
				background: #f2f7fd;
				border-radius: 8.33rpx;
				position: relative;
				padding: 20rpx;

				image {
					width: 38.89rpx;
					height: 38.89rpx;
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
			}

		}
	}

	.list_item {
		.left {
			width: 209.03rpx;
			height: 209.03rpx;
			background: linear-gradient(180deg, #67a0ff, #ede1ff);
			border-radius: 16.67rpx;
			overflow: hidden;

			>view:nth-child(1) {
				font-size: 33rpx;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
				font-weight: 400;
				letter-spacing: 3.33rpx;
			}

			>view:nth-child(2) {
				opacity: 0.44;
				font-size: 42.36rpx;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
				font-weight: 400;
				text-align: left;
			}

			&.bg_red {
				background: linear-gradient(180deg, #ff6767, #ffe1e1);
			}
		}

		.right {
			padding: 33rpx 28rpx;
		}
	}
}
</style>
